<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="example-1">
			<table border="1">
				<tr >
					<td><button type="button" @click="checkAll">全选</button></td>
					<td>ID</td>
					<td>书籍名称</td>
					<td>出版日期</td>
					<td>价格</td>
					<td>购买数量</td>
					<td>操作</td>
				</tr>
				<tr v-for="(item,index) in books" :key="item.id">
					<td><input type="checkbox" :checked="item.isChecked"/></td>
					<td>{{item.id}}</td>
					<td>{{item.name}}</td>
					<td>{{item.date}}</td>
					<!-- <td>{{formatPrice(item.price)}}</td> -->
					<td>{{item.price | formatPrice}}</td>
					<td>
						<blog-post :item="item" @child-mouse='mouse' @child-add='add'></blog-post>
					</td>
					<td><button type="button" @click="remove(index)">{{item.option}}</button></td>
				</tr>
			</table>
			<!-- <h2>总价格：{{formatPrice(total)}}</h2> -->
			<h2 v-show="empty">总价格：{{total | formatPrice}}</h2>
			<h2 v-show="!empty">购物车为空</h2>
			<div><button type="button" v-on:keyup.enter="login()">登录</button></div>
			</div>
			
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			Vue.component('blog-post',{
					props:['item'],
					template:`<div>
					<button type="button" @click="$emit('child-mouse',item)" :disabled="item.number < 1">-</button>
					{{item.number}}
						<button type="button" @click="$emit('child-add',item)">+</button>
						</div>`,
			})
			
			var example1 = new Vue({
			  el: '#example-1',
			  data: {
			    books: [
			      {isChecked: false,id:1,name:'《Java从入门到放弃》',date:'2010-10',price:60.00,number:1,option:'移除'},
			      {isChecked: false,id:2,name:'《PHP从入门到放弃》',date:'2012-10',price:90.00,number:1,option:'移除'},
				  {isChecked: false,id:3,name:'《Python从入门到放弃》',date:'2013-10',price:80.01,number:1,option:'移除'},
				  {isChecked: false,id:4,name:'《什么都是从入门到放弃》',date:'2011-10',price:70.02,number:1,option:'移除'},
			    ],
				empty:true,
				isActive: true,
			  },
			  
			  computed:{
				  total: function(){
					  return this.books.reduce((returnVal,nextItem) => returnVal + nextItem.price * nextItem.number,0);
				  },
			  },
			  
			  // formatPrice:function(){
			  					 //  // return function(price){
			  						//  //  console.log(price);
			  						//  //  return '￥'+price.toFixed(2);
			  					 //  // }
			  					 //  return price => '￥'+price.toFixed(2);
			  // },
			  
			  filters: {
			  		formatPrice: price => '￥'+price.toFixed(2)
			  },
			  
			  methods: {
			   add: function(item){
			  		console.log(item);
			  		item.number++;
			  	},
				mouse: (item) => item.number--,
				// remove: index => {
				// 	console.log(this);
				// 	this.books.splice(index,1)
				
				// },
				remove: function(index){
					this.books.splice(index,1)
					if(this.books.length === 0){
						this.empty = false;
					}
				},
				
				login: function(){
					console.log("正在登录")
				},
				
				checkAll: function(){
					for(var i=0;i<this.books.length;i++){
					this.books[i].isChecked = !this.books[i].isChecked;
					}
				},
				
				buy: function(){
					for(var i=0;i<this.books.length;i++){
						if(this.books[i].number>0){
						this.bookId[i] = this.books[i].id;
						console.log(this.bookId[i])
						}
					}
				}
			  }
			  
			})
			
		</script>
		
	</body>
</html>
